$(function () {
    refresh(null);
});

function refresh(jsonStr){
    if(jsonStr==null){
        return;
    }

    Highcharts.setOptions({
        lang: {
            resetZoom: '重置比例'
        }
    });

    var json = JSON.parse(jsonStr);

    $('#container').highcharts({
        chart: {
            type: 'area',
            pinchType: 'x',
            spacing: [2, 0, 8, 0]
        },
        title: {
            text: json.title,
            style: {
                fontSize: '16px'
            }
        },
        credits: {
            enabled: false
                },
        legend: {
            itemDistance: 5,
            margin: 0
        },
        xAxis: {
            categories: json.categories,
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                enabled: false
            }
        },
        tooltip: {
            useHTML: true,
            shared: true,
          /*headerFormat: '时间：{point.key}' +
                          '<table width="150" border="1" bordercolor="#AAAAAA" style="border-collapse:collapse" cellspacing="0" cellpadding="0">' +
                          '<tr><td width="36%" style="text-align:center">污染物</td>' +
                          '<td width="32%" style="text-align:center">分指数</td>' +
                          '<td width="32%" style="text-align:center">百分比</td></tr>',

            pointFormat: '<tr><td bgColor={point.color} style="text-align:center; color:#FFFFFF">{series.name}</td>' +
                         '<td style="text-align:center">{point.y:,.3f}</td>'+
                         '<td style="text-align:center">{point.percentage:.1f}%</td></tr>',

            footerFormat: '<tr><td style="text-align:center">综指</td>' +
                          '<td style="text-align:center">11</td>' +
                          '<td style="text-align:center">100%</td></tr></table>'*/
            formatter:function(){
                var time = this.points[0].x;
                var total = 0;
                var table = '时间：'+ time +
                          '<table width="150" border="1" bordercolor="#BBBBBB" style="border-collapse:collapse; font-size:10px;" cellspacing="0" cellpadding="0">' +
                          '<tr height=16><td width="36%" style="text-align:center">污染物</td>' +
                          '<td width="32%" style="text-align:center">分指数</td>' +
                          '<td width="32%" style="text-align:center">百分比</td></tr>';
                for(var i=0;i<this.points.length;i++){
                    table += '<tr height=16><td bgColor='+ this.points[i].color +' style="text-align:center; color:#FFFFFF">'+this.points[i].series.name+'</td>' +
                            '<td style="text-align:center">'+ this.points[i].y +'</td>'+
                            '<td style="text-align:center">'+this.points[i].percentage.toFixed(1)+'%</td></tr>';
                    total += this.points[i].y;
                }
                table+='<tr height=16><td style="text-align:center">综指</td>' +
                     '<td style="text-align:center">'+ total.toFixed(3) +'</td>' +
                     '<td style="text-align:center">100%</td></tr></table>';
                return table;
            }
        },
        plotOptions: {
            area: {
                stacking: 'percent',
                lineColor: '#ffffff',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#ffffff'
                }
            }
        },
        series: json.series
    });
};